@keyframes rotate {
  0% {
    transform: rotate(0deg);
  }

  50% {
    transform: rotate(360deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

.popup-enter-active,
.popup-leave-active {
  transition:
    opacity 0.3s,
    transform 0.3s;
}

.popup-enter-from,
.popup-leave-to {
  opacity: 0;
  transform: translate(0, 50%) scale(0.5);
}

.sw-hint-popup,
.sw-update-popup {
  position: fixed;
  bottom: 1rem;
  inset-inline-end: 1rem;
  z-index: var(--pwa-z-index);

  padding: 0.5rem 0.75rem;
  border-width: 0;
  border-radius: 0.5rem;

  background: var(--pwa-bg-color);
  color: var(--pwa-color);
  box-shadow: 0 2px 12px 0 var(--pwa-shadow-color);

  font-size: 1rem;
  line-height: 1.5;

  cursor: pointer;

  @media print {
    display: none;
  }

  .icon-wrapper {
    display: inline-block;
    vertical-align: middle;

    width: 1.5rem;
    height: 1.5rem;
    margin-inline-start: 0.4rem;
    border-radius: 0.75rem;

    background: var(--pwa-btn-bg-color);

    &:hover {
      background: var(--pwa-btn-hover-bg-color);
    }

    svg {
      width: 1.2rem;
      height: 1.2rem;
      margin: 0.15rem;

      color: var(--pwa-btn-text-color);

      animation: rotate 3s ease infinite;
    }
  }
}
